<template>
	<view class="physical-appoint">
		<view class="physical-appoint-main">
			<view v-for="(item,index) in dataList" :key="index" class="physical-appoint-main-item u-border-bottom">
				<view class="physical-appoint-main-item-box flexR">
					<view class="img">
						{{'体检套餐'}}
						<!-- <image :src="baseApi+item.imagePath" mode="scaleToFill"></image> -->
					</view>
					<view class="physical-appoint-main-item-right" @click="toPage(item)">
						<view class="physical-appoint-main-item-right-title flexR">
							<view class="title-left">
								{{item.name}}
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<view class="row flexR">
							<text style="font-size: 20px;color: red;">￥{{item.comboMoney}}</text>
							<view class="underline">
								￥{{item.money}}
								<text></text>
							</view>
						</view>
						<view class="row">
							<text class="tag" v-if="item.vipStatus==1">{{'VIP'}}</text>
							<text class="tag" v-if="item.diffMoney!=='0.00'">优惠<text class="combo">{{item.diffMoney}}</text>元</text>
							<text class="tag">{{transSex(item.genderLimitStatus)}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty text='暂无可选体检套餐信息' mode="list" v-if="!load&&dataList.length===0"></u-empty>
		<view class="physical-type">
			<u-popup v-model="showPhysicalType" mode='bottom' :closeable='true' :mask-close-able='false'>
				<view class="physical-type-content">
					<view class="physical-type-content-header">
						体检类型
					</view>
					<view class="physical-type-main flexR">
						<view v-for="(item,index) in typeList" :key="index" :class="item.healthTypeId===physicalType?'active':''"
						@click="onClickType(item)">
							{{item.name}}
						</view>
					</view>
					<view class="physical-type-content-btn grad-home-header" @click="confirm">
						确认
					</view>
				</view>
			</u-popup>
		</view>
		<Load :load="load" />
	</view>
</template>

<script>
	import Load from '@/components/Load/index.vue'
	import { getPhysicalType, getPhysicalCombo } from '@/api/physical.js'
	export default {
		components:{ Load },
		data() {
			return {
				load:false,
				showPhysicalType:false,
				dataList:[],
				typeList:[],
				physicalTypeName:'', //所选择的体检类型名称
				physicalType:null,//所选择的体检类型
				checkedType:false, // 是否确认选择了体检类型
			}
		},
		watch:{
			showPhysicalType(val){
				if(!val){
					if(!this.checkedType){
						uni.navigateBack()
					}
				}
			}
		},
		created() {
			this.initData()
		},
		methods: {
			initData(){
				this.load = true
				getPhysicalType().then(data => {
					this.typeList = data||[]
					if(this.typeList.length){
						this.physicalType = this.typeList[0].healthTypeId
						this.physicalTypeName = this.typeList[0].name
					}
					this.load = false
					this.showPhysicalType = true
				}).catch(e => {
					this.load = false
					this.typeList = []
				})
			},
			transMoney(item){
				if(item.money){
					return item.money - item.comboMoney
				}else{
					return 0
				}
			},
			transSex(val){
				if(val==1){
					return '限男性'
				}else if(val==2){
					return '限女性'
				}else{
					return '性别不限'
				}
			},
			onClickType(item,index){
				this.physicalType = item.healthTypeId
				this.physicalTypeName = item.name
			},
			confirm(){
				if(this.physicalType===null){
					this.$u.toast('请选择体检类型')
					return
				}
				this.checkedType = true
				this.showPhysicalType = false
				this.load = true
				getPhysicalCombo({healthTypeId:''}).then(data => {
					this.load = false
					this.dataList = data||[]
				}).catch(e => {
					this.dataList = []
					this.load = false
				})
			},
			toPage(item){
				let res = {
					healthTypeId:this.physicalType,
					healthTypeName:this.physicalTypeName,
					comboName:item.name
				}
				uni.navigateTo({
					url:'/physical/PhysicalServe/comboDetail?comboId=' + item.comboId + '&data=' + JSON.stringify(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.physical-appoint{
		background-color: $uni-bg-color;
		height: 100%;
		overflow: scroll;
		&-main{
			&-item{
				&-box{
					background-color: $uni-bg-color;
					padding: 40rpx 30rpx;
					>.img{
						width: 176rpx;
						height: 176rpx;
						border-radius: 12rpx;
						background-color: $theme-color-dark;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 34rpx;
						font-weight: bold;
						overflow: hidden;
						margin-right: 30rpx;
						>image{
							width: 176rpx;
							height: 198rpx;
						}
					}
					>.physical-appoint-main-item-right{
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.physical-appoint-main-item-right-title{
							height: 40rpx;
							line-height: 40rpx;
							font-size: 34rpx;
							color: #000000;
							justify-content: space-between;
							font-weight: bold;
							margin-bottom: 10rpx;
						}
						.row {
							align-items: flex-end;
							.underline{
								margin-left: 10rpx;
								font-size: 26rpx;
								position: relative;
								>text{
									position: absolute;
									display: inline-block;
									width: 100%;
									height: 1px;
									background-color: $text-color;
									top: 50%;
									left: 0;
								}
							}
						}
						.tag{
							font-size: 24rpx;
							font-weight: 100;
							color: $text-color;
							background-color: $tag-color;
							height: 36rpx;
							line-height: 36rpx;
							padding: 7rpx 17rpx;
							border-radius: 5rpx;
							margin: 0 10rpx;
							.combo{
								color: $orage-color;
								margin: 0 4rpx;
							}
						}
					}
				}
			}
		}
		.physical-type{
			&-content{
				padding: 30rpx 20rpx;
				&-header{
					height: 30rpx;
					line-height: 30rpx;
					font-size: 30rpx;
				}
				.physical-type-main{
					padding: 20rpx 0;
					flex-wrap: wrap;
					>view{
						padding: 10rpx 20rpx;
						border: 1px solid $border-color;
						border-radius: 6rpx;
						margin: 10rpx;
					}
					>.active{
						border: 1px solid $border-color;
						background-color: $theme-color-dark;
					}
				}
				&-btn{
					height: 90rpx;
					margin: 10rpx;
					text-align: center;
					line-height: 90rpx;
					color: #fff;
					border-radius: 12rpx;
				}
			}
		}
	}
</style>
